<!--
  任务栏组件
  @author 邵鹏坤 2022年9月19日
  参考window11 底部任务栏
  1 数据源：
    循环展示vuex中存活导航的 ‘aliveBarList’
  2 状态：
    一般静置状态：也是基本状态 显示图标
    焦点状态：依靠‘aliveNavbarList’利用计算属性得出当前焦点导航->'currentBarId'
      放大图标，显示导航name
    悬浮状态: 鼠标hover之后，ui效果同上述 ’焦点状态‘
  3 交互 （点击事件）：
    本组件内不做过多操作，只需要将被点击的导航id传入vuex中对应的mutations里
    具体业务逻辑将由vuex承担
-->
<template>
  <div class="taskBar">
    <Transition name="taskBar" v-for="item in aliveNavbarList" :key="item.id">
      <div :class="parseClass(item)" @click="taskBarClick(item.id, item.zindex)" v-show="item.alive">
        <div class="aliveBarLogo">
          <Icon :iconClass="item.icon"></Icon>
          <div class="aliveBarFlag" :style="{ borderColor: 'grew' }"></div>
        </div>
        <div class="hoverDialog">
          <span>
            {{ item.name }}
          </span>
          <div class="target"></div>
        </div>
      </div>
    </Transition>
    <div
      class="task-notice"
      @click="
        store.state.noticeShow === true ? store.commit('changeNotice', false) : store.commit('changeNotice', true)
      "
    >
      <Icon iconClass="icon-icon-yichang"></Icon>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { onMounted, ref, computed, defineProps } from 'vue'
  import Icon from '@/views/icon/Icon.vue'
  import { useStore } from 'vuex'
  const width = ref()
  const height = ref()
  const store = useStore()
  const aliveNavbarList = ref()
  const props = defineProps<{
    notice?: boolean
  }>()
  /**
   * 在生命周期内拿到用vuex中存活导航列表
   */
  onMounted(() => {
    aliveNavbarList.value = store.getters.getAliveBarList
  })
  /**
   * currentBarId:string 当前展示的导航id
   * 依靠‘aliveNavbarList’利用计算属性得出当前焦点导航的id，用于展示对应导航的'焦点状态'
   */
  const currentBarId = computed(() => {
    let maxZindex = 0
    let maxItemId = -1
    aliveNavbarList.value.forEach((item: any) => {
      if (item.zindex > maxZindex) {
        maxItemId = item.id
        maxZindex = item.zindex
      }
    })
    return maxItemId
  })
  /**
   * 封装：根据每个导航不同的状态，返回对应状态的css.class，用于UI效果渲染
   * @param item（导航对象）
   * return classStr:string（对应导航状态的class）
   */
  const parseClass = (item: any) => {
    let classStr = ''
    if (store.state.isToSmall) {
      classStr = 'aliveBar'
    } else if (currentBarId.value === item.id && !item.minScreen) {
      classStr = 'aliveBarHover'
    } else {
      classStr = 'aliveBar'
    }
    return classStr
  }
  /**
   * 任务栏图标点击事件,具体的逻辑处理交由vuex
   * @param id 点击的导航id
   * @param zindex 点击的导航的zindex
   */
  const taskBarClick = (id: number, zindex: number) => {
    // 交付给vuex
    store.commit('toTop', { id: id, zindex: zindex })
  }
</script>

<style lang="scss" scoped>
  @import './css/index.scss';
</style>
